<template>
    <div class="formMin" ref="gespecial">
        <publiMin :title="'最新专题'">
            <template>查看全部></template>
            <template v-slot:qq>
                <ul class="formul">
                    <li v-for="item in zui" :key="item.id">
                        <img :src="item.cover" alt="">
                        <div class="dingwei">
                            <p>{{ item.title }}</p>
                            <p>{{ item.summary }}</p>
                            <span>￥{{ item.lowestPrice }}</span>
                        </div>
                        <div class="formdi">
                            <span>♡{{ item.collectNum }}</span>
                            <span>☺{{ item.replyNum }}</span>
                            <span>✉{{ item.viewNum }}</span>
                        </div>
                    </li>
                </ul>
            </template>
        </publiMin>
    </div>
</template>
<script>
import publiMin from "@/components/bottom/publiMin.vue"
import { getspecial } from "@/utils/api/homeapi"
import { lazyload } from "@/utils/content"
export default {
    components: { publiMin },
    data() {
        return {
            zui: []
        }
    },
    mounted() {
        // this.getgetspecial()
        lazyload(this.$refs.gespecial,this.getgetspecial)
    },
    methods: {
        async getgetspecial() {
            let data = await getspecial()
            // console.log(data);
            this.zui = data.data.result
        }
    }
}
</script>
<style lang="scss">
.formMin {
    width: 1200px;
    height: 100%;
    margin: auto;
    // background: pink;

    .formul {
        width: 100%;
        height: 380px;
        display: flex;
        justify-content: space-between;

        li {
            width: 32.5%;
            height: 95%;
            background: white;
            position: relative;

            img {
                width: 100%;
                height: 80%;
            }

            .formdi {
                width: 100%;
                height: 20%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;

                span {
                    font-size: 18px;
                }
            }

            .dingwei {
                width: 100%;
                height: 20%;
                position: absolute;
                // background: red;
                left: 0;
                bottom: 20%;

                p {
                    padding: 0 20px;
                    width: 80%;
                    font-size: 20px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-top: 5px;
                    color: white;
                }
                span{
                    position: absolute;
                    width: 15%;
                    height: 30%;
                    background: white;
                    right: 20px;
                    bottom: 30px;
                }
            }
        }
        li:hover{
            box-shadow: 0 0 10px rgb(176, 156, 156);
        transform: translate(0,-3px);
        }
    }
}
</style>